<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>fx (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">fx</span>
</div>

<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_fx_AbstractDragDrop.html">
          goog.fx.AbstractDragDrop</a><br/>
        <div class="class-details">Abstract class that provides reusable functionality for implementing drag
and drop functionality.

This class also allows clients to define their own subtargeting function
so that drop areas can have finer granularity then a singe element. This is
accomplished by using a client provided function to map from element and
coordinates to a subregion id.

This class can also be made aware of scrollable containers that contain
drop targets by calling addScrollableContainer. This will cause dnd to
take changing scroll positions into account while a drag is occuring.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_ActiveDropTarget_.html">
          goog.fx.ActiveDropTarget_</a><br/>
        <div class="class-details">Class representing an active drop target

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_Animation.html">
          goog.fx.Animation</a><br/>
        <div class="class-details">Constructor for an animation object.
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_AnimationEvent.html">
          goog.fx.AnimationEvent</a><br/>
        <div class="class-details">Class for an animation event object.
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_AnimationParallelQueue.html">
          goog.fx.AnimationParallelQueue</a><br/>
        <div class="class-details">Constructor for AnimationParallelQueue object.
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_AnimationQueue.html">
          goog.fx.AnimationQueue</a><br/>
        <div class="class-details">Constructor for AnimationQueue object.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_AnimationSerialQueue.html">
          goog.fx.AnimationSerialQueue</a><br/>
        <div class="class-details">Constructor for AnimationSerialQueue object.
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_CssSpriteAnimation.html">
          goog.fx.CssSpriteAnimation</a><br/>
        <div class="class-details">This animation class is used to animate a CSS sprite (moving a background
image).  This moves through a series of images in a single image sprite and
loops the animation when done.  You should set up the
<code> background-image</code> and size in a CSS rule for the relevant element.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragDrop.html">
          goog.fx.DragDrop</a><br/>
        <div class="class-details">Drag/drop implementation for creating drag sources/drop targets consisting of
a single HTML Element.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragDropEvent.html">
          goog.fx.DragDropEvent</a><br/>
        <div class="class-details">Object representing a drag and drop event.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragDropGroup.html">
          goog.fx.DragDropGroup</a><br/>
        <div class="class-details">Drag/drop implementation for creating drag sources/drop targets consisting of
multiple HTML Elements (items). All items share the same drop target(s) but
can be dragged individually.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragDropItem.html">
          goog.fx.DragDropItem</a><br/>
        <div class="class-details">Class representing a source or target element for drag and drop operations.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragEvent.html">
          goog.fx.DragEvent</a><br/>
        <div class="class-details">Object representing a drag event
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragListGroup.html">
          goog.fx.DragListGroup</a><br/>
        <div class="class-details">A class representing a group of one or more "drag lists" with items that can
be dragged within them and between them.

Example usage:
  var dragListGroup = new goog.fx.DragListGroup();
  dragListGroup.setDragItemHandleHoverClass(className1, className2);
  dragListGroup.setDraggerElClass(className3);
  dragListGroup.addDragList(vertList, goog.fx.DragListDirection.DOWN);
  dragListGroup.addDragList(horizList, goog.fx.DragListDirection.RIGHT);
  dragListGroup.init();

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragListGroupEvent.html">
          goog.fx.DragListGroupEvent</a><br/>
        <div class="class-details">The event object dispatched by DragListGroup.
The fields draggerElCenter, hoverList, and hoverNextItem are only available
for the BEFOREDRAGMOVE and DRAGMOVE events.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_DragScrollSupport.html">
          goog.fx.DragScrollSupport</a><br/>
        <div class="class-details">A scroll support class. Currently this class will automatically scroll
a scrollable container node and scroll it by a fixed amount at a timed
interval when the mouse is moved above or below the container or in vertical
margin areas. Intended for use in drag and drop. This could potentially be
made more general and could support horizontal scrolling.

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_Dragger.html">
          goog.fx.Dragger</a><br/>
        <div class="class-details">A class that allows mouse or touch-based dragging (moving) of an element

</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_ScrollableContainer_.html">
          goog.fx.ScrollableContainer_</a><br/>
        <div class="class-details">Class for representing a scrollable container
</div>
 </div>
 <div class="fn-constructor">
        <a href="interface_goog_fx_Transition.html">
          goog.fx.Transition</a><br/>
        <div class="class-details">An interface for programmatic transition. Must extend
<code> goog.events.EventTarget</code>.
</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_fx_TransitionBase.html">
          goog.fx.TransitionBase</a><br/>
        <div class="class-details">Constructor for a transition object.

</div>
 </div>
   
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>



<h2>Enumerations</h2>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.DragListDirection"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">DragListDirection</span>
        : 
     </div>


     <div class="entryOverview">
       Enum to indicate the direction that a drag list grows.

     </div>

     <div class="entryDetails">
       <div class="detailsSection">
          <b>Constants:</b>
          <table class="horiz-rule">
            <tbody>
              <tr><td>
                <span class="entryName">
                  DOWN
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  LEFT
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  LEFT_2D
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  RIGHT
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  RIGHT_2D
                </span>
                <div class="entryOverview">
                  <span class='nodesc'>No description.</span>
                </div>
             </td></tr>
           </tbody>
         </table>
       </div>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_draglistgroup.js.source.html#line124">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>







  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.AbstractDragDropTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">AbstractDragDropTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_abstractdragdrop_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.AnimationQueueTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">AnimationQueueTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_animationqueue_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.AnimationTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">AnimationTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_animation_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.CssSpriteAnimationTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">CssSpriteAnimationTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_cssspriteanimation_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.DragDropGroupTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">DragDropGroupTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_dragdropgroup_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.DragListGroupTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">DragListGroupTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_draglistgroup_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.DragScrollSupportTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">DragScrollSupportTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_dragscrollsupport_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.DraggerTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">DraggerTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_dragger_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.anim"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">anim</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_anim_anim.js.source.html#line20">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.animTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">animTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_anim_anim_test.js.source.html#line15">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.css3"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">css3</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_css3_transition.js.source.html#line20">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.dom"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">dom</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_dom.js.source.html#line21">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.fx.easing"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">easing</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_easing.js.source.html#line21">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>





  <a name="goog.fx.easingTest"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.fx.</span><span class="entryName">easingTest</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_fx_easing_test.js.source.html#line16">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Package fx</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">Package Reference</h2>
            <div id="sideTypeIndex" rootPath="" current="fx"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
